<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="queryForm.name" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="设备类型" prop="equipmentType">
          <el-select v-model="queryForm.equipmentType" clearable style="width: 200px;">
            <el-option
              v-for="(item,index) in equipmentTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <d2-crud
      ref="d2Crud"
      :columns="columns"
      :data="data"
      :loading="loading"
      :pagination="pagination"
      @pagination-current-change="paginationCurrentChange"
      selection-row
      @selection-change="handleSelectionChange"
      :form-options="formOptions"
      :rowHandle="rowHandle"
      @dialog-open="handleDialogOpen"
      @dialog-cancel="handleDialogCancel"
      add-title="新增设备型号"
      :add-template="addTemplate"
      :add-rules="addRules"
      @row-add="handleRowAdd"
      edit-title="修改设备"
      :edit-template="addTemplate"
      :edit-rules="addRules"
      @row-edit="handleRowEdit"
      @row-remove="handleRowRemove"
      @form-data-change="handleFormDataChange"
    >
      <el-button slot="header" style="margin-bottom: 5px" @click="addRow" size="mini">新增</el-button>
      <el-button slot="header" style="margin-bottom: 5px" @click="deleteRows" size="mini">删除</el-button>
    </d2-crud>
  </d2-container>
</template>

<script>
export default {
  name: "equipmentmodel",
  data() {
    return {
      queryForm: {
        name: "",
        equipmentType: ""
      },
      equipmentTypeList: [],
      equipmentNBList: [],
      equipmentLORAList: [],
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      columns: [
        {
          title: "序号",
          key: "serialNum",
          sortable: true
        },
        {
          title: "名称",
          key: "name",
          sortable: true
        },
        {
          title: "供应商",
          key: "supplierName",
          sortable: true
        },
        {
          title: "设备类型",
          key: "equipmentTypeDesc"
        },
        {
          title: "设备重量",
          key: "equWeight"
        },
        {
          title: "设备尺寸",
          key: "equSize"
        }
      ],
      data: [],
      addTemplate: {
        serialnumber: {
          title: "序列号",
          value: "",
          component: {
            disabled: false
          }        },
        name: {
          title: "名称",
          value: ""
        },
        equipmentType: {
          title: "网络类型",
          value: "",
          component: {
            name: "el-select",
            options: []
          }
        },
        operator: {
          title: "运营商",
          value: "",
          component: {
            name: "el-select",
            options: [],
            show: false
          }
        },
        moduleType: {
          title: "模组类型",
          value: "",
          show: false
        },
        // equipmentnbtype: {
        //   title: 'NB类型',
        //   value: '',
        //   component: {
        //     name: 'el-select',
        //     options: [],
        //     show: false
        //   }
        // },
        // equipmentloratype: {
        //   title: 'LORA类型',
        //   value: '',
        //   component: {
        //     name: 'el-select',
        //     options: [],
        //     show: false
        //   }
        // },
        supplier: {
          title: "供应商",
          value: "",
          component: {
            name: "el-select",
            options: []
          }
        },
        equWeight: {
          title: "设备重量",
          value: ""
        },
        equSize: {
          title: "设备尺寸",
          value: ""
        }
      },
      formOptions: {
        labelWidth: "100px",
        labelPosition: "left",
        saveLoading: false
      },
      addRules: {
        serialnumber: [
          { required: true, message: "请输入序列号", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        moduleType: [
          { required: true, message: "请输入模组类型", trigger: "blur" }
        ],
        equipmentType: [
          { required: true, message: "请输入设备类型", trigger: "change" }
        ],
        operator: [
          { required: true, message: "请选择运营商", trigger: "change" }
        ],
        supplier: [
          { required: true, message: "请选择供应商", trigger: "change" }
        ],
        equWeight: [
          { required: true, message: "请输入设备重量", trigger: "blur" }
        ],
        equSize: [
          { required: true, message: "请输入设备尺寸", trigger: "blur" }
        ]
      },
      rowHandle: {
        columnHeader: "操作",
        edit: {
          text: "编辑"
        },
        remove: {
          text: "删除"
        }
      },
      selectionRow: []
    };
  },
  mounted() {
    this.initData();
    this.fetchData();
  },
  methods: {
    initData() {
      this.$api.admin_equipmentmodel_getEquipmentType().then(res => {
        if (res.equipment) {
          this.equipmentTypeList = res.equipment.map(i => {
            return {
              value: i.value,
              label: i.desc
            };
          });
          this.addTemplate.equipmentType.component.options = this.equipmentTypeList;
        }
        if (res.equipmentNB) {
          this.equipmentNBList = res.equipmentNB.map(i => {
            return {
              value: i.value,
              label: i.desc
            };
          });
          this.addTemplate.operator.component.options = this.equipmentNBList;
        }
      });
      this.$api.admin_supplier_getList().then(res => {
        const options = res.map(i => {
          return {
            value: i.id,
            label: i.supplierName
          };
        });
        this.addTemplate.supplier.component.options = options;
      });
    },
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchData();
    },
    fetchData() {
      this.loading = true;
      this.$api
        .admin_equipmentmodel_getPageList({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          ...this.queryForm
        })
        .then(res => {
          this.data = res.data;
          this.pagination.total = res.total;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleFormDataChange({ key, value }) {
      console.log(key, value);
      if (key == "equipmentType") {
        // this.$refs.d2Crud.setFormField('equipmentloratype', '')
        // this.$refs.d2Crud.setFormField('equipmentnbtype', '')
        this.$refs.d2Crud.setFormField("operator", "");
        // 控制子类型是否显示
        if (value == 1) {
          // this.addTemplate.equipmentloratype.component.show = true
          // this.addTemplate.equipmentnbtype.component.show = false
          this.addTemplate.operator.component.show = true;
          this.addTemplate.moduleType.show = true;
          // this.addTemplate.operator.value = 3
        } else if (value == 2) {
          this.addTemplate.operator.component.show = true;
          this.addTemplate.moduleType.show = true;
          // this.addTemplate.equipmentloratype.component.show = false
          // this.addTemplate.equipmentnbtype.component.show = true
        } else {
          this.addTemplate.operator.component.show = false;
          this.addTemplate.moduleType.show = false;
        }
      }
    },
    handleFormSubmit() {
      this.pagination.currentPage = 1;
      this.fetchData();
    },
    addRow() {
      this.$refs.d2Crud.showDialog({
        mode: "add"
      });
      this.addTemplate.serialnumber.component.disabled = false;
    },
    handleRowAdd(row, done) {
      this.formOptions.saveLoading = true;
      this.$api
        .admin_equipmentmodel_add(row)
        .then(res => {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.fetchData();
          done();
        })
        .finally(() => {
          this.formOptions.saveLoading = false;
        });
    },
    handleDialogOpen({ mode, row, index }) {
      if (mode === "edit") {
        this.addTemplate.serialnumber.component.disabled = true;
        this.$api.admin_equipmentmodel_get({ id: row.id }).then(res => {
          this.$refs.d2Crud.setFormData(res);
          // 控制子类型是否显示
          if (res.equipmentType == 1) {
            // this.addTemplate.equipmentloratype.component.show = true
            // this.addTemplate.equipmentnbtype.component.show = false
            this.addTemplate.operator.component.show = true;
            this.addTemplate.moduleType.show = true;
          } else if (res.equipmentType == 2) {
            // this.addTemplate.equipmentloratype.component.show = false
            // this.addTemplate.equipmentnbtype.component.show = true
            this.addTemplate.operator.component.show = true;
            this.addTemplate.moduleType.show = true;
          } else {
            this.addTemplate.operator.component.show = false;
            this.addTemplate.moduleType.show = false;
          }
        });
      }
    },
    handleDialogCancel(done) {
      done();
    },
    handleRowEdit({ index, row }, done) {
      this.formOptions.saveLoading = true;
      this.$api
        .admin_equipmentmodel_update(row)
        .then(res => {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.fetchData();
          done();
        })
        .finally(() => {
          this.formOptions.saveLoading = false;
        });
    },
    handleRowRemove({ index, row }, done) {
      this.$api.admin_equipmentmodel_delete([row.id]).then(res => {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.fetchData();
        done();
      });
    },
    handleSelectionChange(selection) {
      this.selectionRow = selection;
    },
    deleteRows() {
      this.$confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(() => {
        this.$api
          .admin_equipmentmodel_delete(this.selectionRow.map(item => item.id))
          .then(res => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.fetchData();
          });
      });
    }
  }
};
</script>
